/**
 * @file
 * @author wl
 */
import React, {useEffect, useState} from 'react';
import {Modal, Table} from 'antd';

const DetailModal = props => {
    const {
        data,
        detailModalVisible,
        onCancel
    } = props;

    const [columns, setColumns] = useState([]);
    const [dataSource, setDataSource] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        setLoading(true);
    }, [detailModalVisible]);

    useEffect(() => {
        setLoading(false);
        const {columnList = [], value = []} = data || {};
        const newColumns = columnList?.map(item => ({
            title: item.name,
            dataIndex: item.name,
            key: item.id,
        }));

        setColumns(newColumns);
        setDataSource(value);
    }, [data]);

    return (
        <Modal
            title="详情"
            visible={detailModalVisible}
            onCancel={onCancel}
            onOk={onCancel}
        >
            <Table
                loading={loading}
                columns={columns}
                dataSource={dataSource}
                pagination={{
                    size: 'small',
                    defaultPageSize: 10,
                    showSizeChanger: false
                }}
                scroll={{y: 400}}
            />
        </Modal>
    );
};

export default DetailModal;
